<template>
	<div class="grid-layout-container pt15">
		<div>
			<grid-layout
				v-model:layout="state.layouts" :col-num="3" :row-height="10"
				:is-draggable="true" :is-resizable="false" :is-mirrored="false"
				:vertical-compact="true" :margin="[15, 0]" :use-css-transforms="true">
				<grid-item v-for="item in state.layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
					<section>
						<div v-if="item.i == '1'">
							<today ref="todayRef"></today>
						</div>
						<div v-if="item.i == '2'">
							<month ref="monthRef"></month> 
						</div>
						<div v-if="item.i == '3'">
							<shortcutMenu ref="shortcutMenuRef"></shortcutMenu>
						</div>
						<div v-if="item.i == '4'">
							<achievement ref="achievementRef"></achievement>
						</div>
						<div v-if="item.i == '5'">
							<news ref="newsRef"></news>
						</div>
						<div v-if="item.i == '6'">
							<age ref="ageRef"></age>
						</div>
						<div v-if="item.i == '7'">
							<consumerStatistics ref="consumerStatisticsRef"></consumerStatistics>
						</div>
						<div v-if="item.i == '8'">
							<customerSource ref="customerSourceRef"></customerSource>
						</div>
					</section>
				</grid-item>
			</grid-layout>
		</div>
	</div>
</template>

<script setup lang="ts" name="funGridLayout">
import { reactive,ref,defineAsyncComponent} from 'vue';
// 引入组件
const today = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/today.vue'));
const month = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/month.vue'));
const shortcutMenu = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/shortcutMenu.vue'));
const achievement = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/achievement.vue'));
const news = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/news.vue'));
const age = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/age.vue'));
const consumerStatistics = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/consumerStatistics.vue'));
const customerSource = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/customerSource.vue'));


// 定义变量内容
const todayRef = ref();
const monthRef = ref();
const shortcutMenuRef = ref();
const achievementRef = ref();
const newsRef = ref();
const ageRef = ref();
const consumerStatisticsRef = ref();
const customerSourceRef = ref();


// 定义变量内容
const state = reactive({
	layouts: [
		{ x: 0, y: 0, w: 3, h: 30, i: '1' },
		{ x: 0, y: 30, w: 3, h: 30, i: '2' },
		{ x: 0, y: 60, w: 3, h: 21, i: '3' },
		{ x: 0, y: 81, w: 2, h: 50, i: '4' },
		{ x: 2, y: 81, w: 1, h: 50, i: '5' },
		{ x: 0, y: 131, w: 1, h: 50, i: '6' },
		{ x: 1, y: 131, w: 1, h: 50, i: '7' },
		{ x: 2, y: 131, w: 1, h: 50, i: '8' },
	],
});
</script>

<style scoped lang="scss">
.grid-layout-container {
	background-color: #fff;
	.vue-grid-item {
		background: #fff;
		color: var(--el-color-white);
	}
}
</style>
